<template>
  <div class="cascader-container">
    <!-- 省份选择 -->
    <el-select
      v-model="province"
      placeholder="请选择省份"
      clearable
      filterable
      @change="handleProvinceChange"
      style="width:120px;margin-right: 10px"
    >
      <el-option
        v-for="item in provinces"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
<div></div>
    <!-- 城市选择 -->
    <el-select
      v-model="city"
      placeholder="请选择城市"
      clearable
      filterable
      :disabled="!province"
      @change="handleCityChange"
      style="width:120px;margin-right: 10px"
    >
      <el-option
        v-for="item in cities"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

<div></div>
    <!-- 区县选择 -->
    <el-select
      v-model="district"
      placeholder="请选择区县"
      clearable
      filterable
      :disabled="!city"
      @change="emitEve"
      style="width:120px;"
    >
      <el-option
        v-for="item in districts"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
  </div>
</template>

<script>
import api from "@/request/api.js";
export default {
  name: "RegionCascader",
  props: {
    regionObj: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {
          province_id: "",
          city_id: "",
          area_id: "",
        };
      },
    },
  },
  data() {
    return {
      // 数据存储
      regionData: [],
      // 展示数据
      provinces: [],
      cities: [],
      districts: [],
      // 选中值
      province: "",
      city: "",
      district: "",
    };
  },
  mounted() {

    this.province = this.regionObj.province_id;
    this.handleProvinceChange(this.province, true);
    this.city = this.regionObj.city_id;
    this.handleCityChange(this.city, true);
    this.district = this.regionObj.area_id;
    this.loadProvinces();
  },
  methods: {
    getAreaList(parent_id = 0) {
      return new Promise((resolve, reject) => {
        api.common.getAreaList({ parent_id }).then((res) => {
          if (res?.status == 200) {
            resolve(
              res.data.content.data.map((item) => ({
                code: item.district_id,
                name: item.district_name,
              }))
            );
          } else {
            reject("接口调用失败");
          }
        });
      });
    },
    // 加载省份数据
    loadProvinces() {
      this.getAreaList().then((regionList) => {
        this.provinces.length = 0;
        this.provinces.push(...regionList);
      });
      this.provinces = this.regionData.map((item) => ({
        code: item.code,
        name: item.name,
      }));
    },
    // 省份变化处理
    handleProvinceChange(val, init = false) {
      if (!init) {
        this.city = "";
        this.district = "";
        this.districts = [];
      }
      if (!val) {
        this.cities = [];
        return;
      }
      this.getAreaList(val).then((regionList) => {
        this.cities.length = 0;
        this.cities.push(...regionList);
      });
      if (!init) {
        this.emitEve();
      }
    },
    // 城市变化处理
    handleCityChange(val, init = false) {
      if (!init) {
        this.district = "";
      }
      if (!val) {
        this.districts = [];
        return;
      }
      this.getAreaList(val).then((regionList) => {
        this.districts.length = 0;
        this.districts.push(...regionList);
      });
      if (!init) {
        this.emitEve();
      }
    },
    // 获取完整选择结果
    getSelectedRegion() {
      return {
        province: this.province,
        city: this.city,
        district: this.district,
        provinceObj: this.provinces.find((item) => item.code === this.province),
        cityObj: this.cities.find((item) => item.code === this.city),
        districtObj: this.districts.find((item) => item.code === this.district),
      };
    },
    // 重置选择
    reset() {
      this.province = "";
      this.city = "";
      this.district = "";
      this.cities = [];
      this.districts = [];
    },
    emitEve() {
      this.$emit("change", {
        province: this.province,
        city: this.city,
        district: this.district,
      });
    },
  },
};
</script>

<style scoped>
.cascader-container {
  display: flex;
  align-items: center;
}
</style>
